<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        div{
            border: 1px green solid;
            text-align: center;
            width: 460px;
            height: 100px;
            /*垂直居中*/
            line-height: 100px;
        }
        div img{
            float: right;
        }
        #group1 img{
           display:none;
        }
    </style>
</head>
<body>
<!--div#group$*3>button[type='button' id='fade']{$.}+img*3-->
<div id="group1" >
    <button type="button" id="fadeIn">1.淡入/渐显</button>
    <img src="img/star.gif" alt="">
    <img src="img/star.gif" alt="">
    <img src="img/star.gif" alt="">
</div>
<div id="group2">
    <button type="button" id="fadeOut">2.淡出/渐隐</button>
    <img src="img/star.gif" alt="">
    <img src="img/star.gif" alt="">
    <img src="img/star.gif" alt="">
</div>
<div id="group3">
    <button type="button" id="fadeToggle">3.淡入/淡出自动切换</button>
    <img src="img/star.gif" alt="">
    <img src="img/star.gif" alt="">
    <img src="img/star.gif" alt="">
</div>
<div id="group4">
    <button type="button" id="fadeTo">4.设置褪色级别(0~1)</button>
    <img src="img/star.gif" alt="">
    <img src="img/star.gif" alt="">
    <img src="img/star.gif" alt="">
</div>
<p style="color: red;font-weight: bold">等待操作</p>
</body>
<script>
    $(function () {
        $('#fadeIn').click(function () {
            $('p').text('操作中...');

            $('#group1 img:first').fadeIn('slow');
            $('#group1 img:eq(1)').fadeIn('fast');
            $('#group1 img:last').fadeIn(5000,function () {
                $('p').text('图片淡入成功');
            });
        })
        $('#fadeOut').click(function () {
            $('p').text('操作中...');

            $('#group2 img:first').fadeOut('slow');
            $('#group2 img:eq(1)').fadeOut('fast');
            $('#group2 img:last').fadeOut(5000,function () {
                $('p').text('图片全部淡出完成');
            });
        })
        $('#fadeToggle').click(function () {
            $('p').text('操作中...');

            $('#group3 img:first').fadeToggle('slow');
            $('#group3 img:eq(1)').fadeToggle('fast');
            $('#group3 img:last').fadeToggle(5000,function () {
                $('p').text('图片自动淡入/淡出显示成功');
            });
        })
        $('#fadeTo').click(function () {
            $('p').text('操作中...');

            //速度 级别 1完全可见 0不可见
            $('#group4 img:first').fadeTo('slow',0.6);
            $('#group4 img:eq(1)').fadeTo('fast',0.4);
            $('#group4 img:last').fadeTo(5000,0.2,function () {
                $('p').text('图片褪色成功');
            });
        })
    })
</script>
</html>